<template>
    <view class="container">
        <!-- 药品详情区域 -->
        <view class="detail-box">
            <!-- 药品名称 -->
            <view class="detail-header">
                <text class="medicine-name">{{medicineInfo.drugName}}</text>
                <text class="medicine-subtitle">药品详情</text>
            </view>
            
            <!-- 药品图片位置 -->
            <view class="medicine-image-placeholder">
                <view class="image-wrapper">
                  <img :src="medicineInfo.picture" />
                </view>
            </view>
            
            <!-- 药品详细信息 -->
            <view class="detail-content">
                <view class="info-section">
                    <!-- 药品剂量 -->
                    <view class="info-item">
                        <text class="label">药品剂量</text>
                        <text class="value" v-if="!isEditing">{{medicineInfo.drugDosage}}</text>
                        <picker v-else mode="selector" :range="dosageOptions" @change="onDosageChange">
                            <view class="picker-value">{{editedMedicineInfo.drugDosage}}</view>
                        </picker>
                    </view>
                    
                    <!-- 服用频率 -->
                    <view class="info-item">
                        <text class="label">服用频率</text>
                        <text class="value" v-if="!isEditing">{{medicineInfo.frequency}}</text>
                        <picker v-else mode="selector" :range="frequencyOptions" @change="onFrequencyChange">
                            <view class="picker-value">{{editedMedicineInfo.frequency}}</view>
                        </picker>
                    </view>
                    
                    <!-- 生产日期 -->
                    <view class="info-item">
                        <text class="label">生产日期</text>
                        <text class="value" v-if="!isEditing">{{ truncateAlarmTime(medicineInfo.productionTime) }}</text>
                        <picker v-else mode="date" @change="onProductionDateChange">
                            <view class="picker-value">{{ truncateAlarmTime(editedMedicineInfo.productionTime) }}</view>
                        </picker>
                    </view>
                    
                    <!-- 过期日期 -->
                    <view class="info-item">
                        <text class="label">过期日期</text>
                        <text class="value highlight" v-if="!isEditing">{{ truncateAlarmTime(medicineInfo.uselessTime) }}</text>
                        <picker v-else mode="date" @change="onExpiryDateChange">
                            <view class="picker-value">{{ truncateAlarmTime(editedMedicineInfo.uselessTime) }}</view>
                        </picker>
                    </view>
                    
                    <!-- 自定义剂量 -->
                    <view class="info-item">
                        <text class="label">自定义剂量</text>
                        <text class="value" v-if="!isEditing">{{medicineInfo.customDosage}}</text>
                        <input v-else v-model="editedMedicineInfo.customDosage" class="edit-input" />
                    </view>
                </view>
            </view>

            <!-- 操作按钮 -->
            <view class="action-buttons">
                <button v-if="!isEditing" @click="startEditing" class="edit-button">修改</button>
                <button v-else @click="saveChanges" class="save-button">保存</button>
                <button v-if="isEditing" @click="cancelEditing" class="cancel-button">取消</button>
            </view>
        </view>
    </view>
</template>

<script>
import { useMedicineStore } from '@/store/medicine'
const medicineStore = useMedicineStore()

export default {
    setup(){
        return{
            medicineStore
        }
    },
    data() {
        return {
            medicineInfo: {},
            isEditing: false, // 是否处于编辑状态
            editedMedicineInfo: {}, // 用于存储编辑中的药品信息
            dosageOptions: ['1片', '2片', '3片', '4片', '5片'], // 药品剂量选项
            frequencyOptions: ['每天1次', '每天2次', '每天3次', '饭后服用', '饭前服用'] // 服用频率选项
        }
    },
    methods: {
        truncateAlarmTime(time) {
            return time ? time.substring(0, 10) : '';
        },
        // 开始编辑
        startEditing() {
            this.isEditing = true;
            this.editedMedicineInfo = { ...this.medicineInfo };
        },
        // 保存修改
        saveChanges() {
            this.isEditing = false;
            this.medicineInfo = { ...this.editedMedicineInfo };
            this.medicineInfo.productionTime = this.parseTime(this.medicineInfo.productionTime)
            this.medicineInfo.uselessTime = this.parseTime(this.medicineInfo.uselessTime)
            this.medicineStore.saveDrugChange(this.medicineInfo)
            uni.showToast({
                title: '修改成功',
                icon: 'success'
            });
        },
        parseTime(str){
          return str.length < 11 ? str + ' 08:00:00' : str
        },
        // 取消编辑
        cancelEditing() {
            this.isEditing = false;
            uni.showToast({
                title: '已取消修改',
                icon: 'none'
            });
        },
        // 药品剂量选择
        onDosageChange(e) {
            this.editedMedicineInfo.drugDosage = this.dosageOptions[e.detail.value];
        },
        // 服用频率选择
        onFrequencyChange(e) {
            this.editedMedicineInfo.frequency = this.frequencyOptions[e.detail.value];
        },
        // 生产日期选择
        onProductionDateChange(e) {
            this.editedMedicineInfo.productionTime = e.detail.value;
        },
        // 过期日期选择
        onExpiryDateChange(e) {
            this.editedMedicineInfo.uselessTime = e.detail.value;
        }
    },
    async onLoad(options) {
        try {
            await medicineStore.getDrugDetailById(options.id);
            this.medicineInfo = medicineStore.medicineDetail;
            console.log(this.medicineInfo);
        } catch (error) {
            uni.showToast({
                title: '获取药品详情失败',
                icon: 'none'
            });
            console.error('获取药品详情失败:', error);
        }
    }
}
</script>

<style lang="scss">
.container {
    padding: 20rpx;
    height: 100vh;
    background: linear-gradient(180deg, #f0f5ff 0%, #f5f5f5 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.detail-box {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    width: 90%;
    max-width: 600rpx;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .detail-header {
        padding: 20rpx 0 30rpx;
        margin-bottom: 20rpx;
        border-bottom: 2rpx solid #f0f0f0;
        position: relative;
        text-align: center;
        
        .medicine-name {
            font-size: 40rpx;
            color: #333;
            font-weight: 600;
            margin-bottom: 12rpx;
            display: block;
        }
        
        .medicine-subtitle {
            font-size: 24rpx;
            color: #2ac2d1;
            background: rgba(42, 194, 209, 0.1);
            padding: 6rpx 16rpx;
            border-radius: 20rpx;
        }
    }
    
    .medicine-image-placeholder {
        margin: 0 -30rpx;
        padding: 0 30rpx;
        margin-bottom: 20rpx;
        
        .image-wrapper {
            height: 250rpx;
            background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
            }
        }
    }
    
    .detail-content {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 20rpx;
        
        .info-section {
            background: #f8f9fa;
            border-radius: 16rpx;
            padding: 20rpx;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            padding: 20rpx;
            border-bottom: 2rpx solid rgba(0,0,0,0.03);
            transition: all 0.3s ease;
            
            &:last-child {
                border-bottom: none;
            }
            
            &:hover {
                background: rgba(42, 194, 209, 0.03);
            }
            
            .label {
                width: 160rpx;
                font-size: 28rpx;
                color: #666;
                font-weight: 500;
            }
            
            .value {
                flex: 1;
                font-size: 28rpx;
                color: #333;
                
                &.highlight {
                    color: #2ac2d1;
                    font-weight: 500;
                }
            }

            .edit-input {
                flex: 1;
                font-size: 28rpx;
                color: #333;
                border: 1rpx solid #ddd;
                padding: 10rpx;
                border-radius: 8rpx;
            }

            .picker-value {
                flex: 1;
                font-size: 28rpx;
                color: #333;
            }
        }
    }

    .action-buttons {
        display: flex;
        justify-content: center;
        margin-top: 20rpx;

        button {
            margin: 0 10rpx;
            font-size: 28rpx;
            padding: 15rpx 30rpx;
            border-radius: 50rpx;
            border: none;
            background-color: #2ac2d1;
            color: #fff;
            flex: 1;

            &.cancel-button {
                background-color: #f0f0f0;
                color: #666;
            }
        }
    }
}
</style>